<script lang="ts" setup>
	import type { IFieldItemData } from '@/types/data';

	interface IProps {
		data: Omit<IFieldItemData, "field">;
	}

	defineOptions({
		name: 'HotelListSub',
	});

	const props = defineProps<IProps>();
</script>

<template>
	<div class="hotel-item">
		<router-link
      :to="{
        path: '/detail',
        query: {field: 'hotel', id: props.data.id}
      }"
    >
		  <div class="img">
		  	<img class="hotel-img" v-lazy="props.data.img" :alt="props.data.name" />
		  </div>
		  <div class="info">
		  	<h1 class="title">{{props.data.name}}</h1>
		  	<p class="score">{{props.data.score}}分</p>
		  	<p class="area">{{props.data.area}}</p>
		  	<p class="others">
		  		<span class="item">
		  			￥<span class="price">{{props.data.defaultPrice}}</span>起
		  		</span>
		  		<span class="item">{{props.data.cityName}}</span>
		  	</p>
		  </div>
		</router-link>
	</div>
</template>

<style lang="scss" scoped>
	@import '../../../assets/styles/mixins.scss';
	@import '../../../assets/styles/variables.scss';

	.hotel-item {
		position: relative;
		border-bottom: 1px solid #ddd;
		background-color: #fff;

		.img {
			width: 1.2rem;
			height: 1.2rem;
			padding: .1rem;
			box-sizing: border-box;

			.hotel-img {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: .1rem .1rem 0 1.2rem;
			box-sizing: border-box;

			.title {
				@include ellipsis;
				font-size: .18rem;
				color: #000;
				line-height: .2rem;
			}

			.score {
				line-height: .3rem;
				font-size: .16rem;
				color: $starColor;
			}

			.area {
				@include ellipsis;
				font-size: .14rem;
				color: #999;
			}

			.others {
				display: flex;
				justify-content: space-between;
				margin-top: .1rem;
				line-height: .25rem;

				.item {
					font-size: .14rem;

					&:nth-child(1) {
						color: $defaultGreen;

						.price {
							font-size: .2rem;
						}
					}
				}
			}
		}
	}
</style>










